<template>
  <el-dialog
    v-if="flatWideTableDialog"
    v-model="flatWideTableDialog"
    :title="title"
    width="1048px"
    top="11.6vh"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
    :class="`${customClass} ${visualThemeClassName} ${xvueNameSpace}`"
  >
    <div
      class="flat-wide-table-main"
      :class="xvueTheme"
    >
      <el-button
        class="btn-setting"
        size="default"
        icon="Setting"
        @click="settingClick"
      >
        {{ $demoi18n('word.advancedSetting') }}
      </el-button>
      <el-table
        v-loading="isLoading"
        class="flat-wide-table"
        :data="tableData"
        height="380"
        :border="xvueTheme === 'dark'"
        :row-class-name="rowClassName"
      >
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :label="item.option_label"
          :prop="item.option_value"
          show-overflow-tooltip
        >
          <template #header>
            <img
              :src="getImg(item.type)"
              alt
              class="header-img"
            />
            <span>{{ item.option_label }}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="table-pagination"
        :current-page="pageIndex"
        :page-size="pageSize"
        layout="total,  prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>

      <div class="action-button-group">
        <el-button
          class="button-sure"
          size="default"
          type="primary"
          @click="closeDialog()"
        >
          {{ $demoi18n('btn.confirm') }}
        </el-button>
        <el-button
          class="button-cancel"
          size="default"
          @click="closeDialog()"
        >
          {{ $demoi18n('btn.cancel') }}
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import dataModel from '@/models/panel-config-data.js';
import { checkStringType } from '@/utils/util';

export default {
  name: 'FlatWideTableDialog',
  components: {},
  props: ['widgetInstanceId', 'tableName', 'fieldList', 'packageCode'],
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      customClass: `flat-wide-table-dialog flat-wide-table-dialog-${window._adoPremise.uc.theme || 'light'}`,
      xvueTheme: window._adoPremise.uc.theme,
      title: this.$demoi18n('word.wideTable'),
      isLoading: false,
      flatWideTableDialog: false,
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      mockColumn: [{ code: 'aa', type: 'string' }, { code: 'bb', type: 'string' }, { code: 'cc', type: 'string' }],
      tableData: [],
      mockTableData: [{ aa: 111, bb: 221, cc: 333 }, { aa: 112, bb: 222, cc: 224 }, { aa: 113, bb: 223, cc: 3356 }],
    };
  },
  watch: {
    flatWideTableDialog(newVal) {
      if (newVal) {
        this.pageIndex = 1;
        this.init();
      }
    },
  },
  methods: {
    getImg(type) {
      const t = (type || '').split('(')[0];
      if (checkStringType('number', t)) {
        return new URL(`./number_${this.xvueTheme}.png`, import.meta.url).href;
      } else if (checkStringType('date', t)) {
        return new URL(`./date_${this.xvueTheme}.png`, import.meta.url).href;
      } else {
        return new URL(`./text_${this.xvueTheme}.png`, import.meta.url).href;
      }
    },
    rowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'high-light-row';
      } else {
        return '';
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getTableData();
    },

    init() {
      this.getTableData();
    },
    getTableData() {
      this.isLoading = true;
      const params = {
        pageFrom: (this.pageIndex - 1) * this.pageSize, // 从哪条开始查
        pageSize: this.pageSize,
      };
      dataModel
        .getTableData(this.tableName, params, this.packageCode)
        .then(result => {
          this.tableData = result.data;
          this.total = result.total;
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    settingClick() {
      const baseUrl = window.isLocalEnv ? window.visualBaseUrl : window._adoPromiseBaseUrl;
      const url = `${baseUrl}/xtag/webportal/#/index`;
      window.open(url, null, 'noopener=yes,noreferrer=yes');
    },
    openDialog() {
      this.flatWideTableDialog = true;
    },
    closeDialog() {
      this.flatWideTableDialog = false;
    },
  },
};
</script>

<style lang="less">
@background_color_dark: #071f30;
@borderColor_dark: #116584;
@tableBorderColor_dark: #285b78;
.flat-wide-table-dialog {
  position: relative;
  .flat-wide-table-main {
    padding: 20px 30px 77px 30px;
    position: relative;
    .btn-setting {
      margin-bottom: 20px;
    }

    .flat-wide-table {
      :deep(.el-table__header-wrapper) {
        tr {
          th {
            padding: 7px 0;
            .header-img {
              vertical-align: text-bottom;
              margin-right: 5px;
            }
          }
        }
      }

      :deep(.el-table__body-wrapper) {
        .el-table__row {
          td {
            padding: 3px 0;
          }
        }
      }
    }

    .table-pagination {
      margin-top: 20px;
      float: left !important;
      .el-pagination__editor.el-input{
        margin-left: 5px;
        margin-right: 5px;
      }
    }

    .action-button-group {
      margin-top: 15px;
      position: absolute;
      right: 30px;
      .button-sure {
        padding: 9px 35px;
        border-radius: 0;
      }
      .button-cancel {
        padding: 9px 35px;
        border-radius: 0;
      }
    }
  }

  .dark {
    background-color: @background_color_dark;

    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
      background-color: @tableBorderColor_dark !important;
    }

    .flat-wide-table {
      border-color: @tableBorderColor_dark;
      background-color: #0a2336;

      .el-table__header-wrapper {
        tr {
          background-color: #061a29;
          th {
            background-color: #061a29;
            border-color: @tableBorderColor_dark !important;
            color: #81aec8;
          }
        }
      }
      .el-table__body-wrapper {
        td {
          background-color: #0a2336;
          border-color: @tableBorderColor_dark;
          color: #fff;
        }
      }
    }

    .table-pagination {
      .el-pagination__total {
        color: #fff;
      }
      .btn-prev {
        background-color: #064559;
        color: #79a9c3;
      }
      .el-pager {
        li {
          background-color: #064559;
          color: #79a9c3;
        }
      }
      .btn-next {
        background-color: #064559;
        color: #79a9c3;
      }
      .el-pagination__jump {
        color: #79a9c3;
        .el-input__inner {
          background-color: #064559;
          border-color: #064559;
          color: #79a9c3;
        }
      }
    }

    .btn-setting {
      background-color: #000c17;
      color: #fff;
      border-color: @borderColor_dark;
    }

    .action-button-group {
      .button-sure {
        background-color: #0eb4c2;
        color: #fff;
      }
      .button-cancel {
        background-color: #064559;
        border-color: #064559;

        color: #fff;
      }
    }

    :deep(.el-loading-mask) {
      background-color: rgba(0, 0, 0, 0.72);
    }
  }

  .light {
    .flat-wide-table {
      .high-light-row {
        background-color: #e7f3ff;
      }

      .el-table__header-wrapper {
        th {
          .cell {
            border-right: 1px solid #cccccc;
            color: #9f9f9f;
          }
          &:nth-last-child(2) {
            .cell {
              border-right: unset;
            }
          }
        }
      }
      .el-table__body-wrapper {
        tbody {
          tr:hover > td {
            background-color: #b1daff;
          }
        }
      }
    }
  }
}

// 默认明亮风格样式
.flat-wide-table-dialog {
  .el-dialog__header {
    margin-right: 0px;
    height: 40px;
    line-height: 40px;
    background: #edf3fc;
    padding: 0;
    padding-left: 20px;
    .el-dialog__title {
      font-size: 16px;
      color: #303133;
    }
    .el-dialog__headerbtn {
      position: absolute;
      top: 13px;
      right: 18px;
      padding: 0;
      background: 0 0;
      border: none;
      outline: 0;
      width: 20px;
      height: 20px;
      cursor: pointer;
      .el-icon {
        color: #303133;
      }
    }
  }
  .el-dialog__body {
    padding: 0px !important;
    color: #606266;
  }
}

.flat-wide-table-dialog-light {
  border-radius: 8px;
  .el-dialog__header {
    border-radius: 8px;
  }
}

// 蓝黑风格样式
.flat-wide-table-dialog-dark {
  .el-dialog__header {
    background: #122b40;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn {
      top: 0px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
  }
  .el-dialog__body {
    color: #606266;
  }
}
</style>
